<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
    <!--禁止浏览器自动的识别-电话号码-email--->
    <meta name="format-detection" content="telephone=no,email=no"/>
    <!--是否启用Web全屏-->
    <meta name="apple-mobile-web-app-capable" content='yes' />
    <!--设置苹果工具栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content='black' />
    <title>xq</title>
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/xq.css">
    <link rel="stylesheet" href="css/optiontab.css">
</head>
<body>
<header>
   <ul>
       <li>
           <img src="img/淘宝/商品详情_files/1.gif" alt="">
           <span>天猫超市</span>
       </li>
       <li>
           <input type="text" placeholder="     搜索天猫超市" class="input1" >
       </li>
       <li>
           <img src="img/淘宝/商品详情_files/3.gif" alt="">
           <p>分类</p>
       </li>
   </ul>
</header>


<section>
	

<div id="box">
    <div id="head">
        <h1 class="color">基本信息</h1>
        <h1>商品详情</h1>
        <h1 class="pj">评价</h1>
    </div>
    <ul id="con" style="margin-bottom: 0.5rem;">
        <li class="show">
            
        </li>
        <li>

        </li>
        <li >
            <!--<div>
                <span>好评</span>
                <span>中评</span>
                <span>差评</span>
            </div>-->
            <div class="data_evaluate_num">
				<div class="good_evaluate bgcolor" >好评（<span></span>）</div>
				<div class="center_evaluate">中评（<span></span>）</div>
				<div class="bad_evaluate">差评（<span></span>）</div>
			</div>
			<div id="li1">
				
	            <!--<div id="div1">
	                <span>17835341467</span><span>15:30</span>
	                <p>亲,这里能频伦哟</p>
	                <img src="img/淘宝/商品详情_files/lao.jpg" alt="">
	            </div>-->
			</div>
				<!--<div class="data_evaluate">
					<div class="data_evaluate_user">
						<span>月***脸</span>
						<span>2017-04-09</span>
					</div>
					<p class="data_evaluate_info">没有时间出去，所以就近选则网上购物，都很方便，也很划算，有时候搞活动，就很便宜，满88元免邮费，很方便不用出门就能吃饭自己喜欢吃的零食，</p>
					<img src="../img/lao.jpg">
				</div>-->
			
			
            <!---->
        </li>
    </ul>
 
</div>
</section>

<div class="footer">
	<div class="you">
		<span class="fa fa-shopping-cart cart"></span>
	</div>
        <ul >
        <li>
            <img src="img/淘宝/商品详情_files/4.gif" style="width: 30px;height: 25px;margin-top: 10px;">
            <p >进店</p>
        </li>
        <li>
            <img src="img/淘宝/商品详情_files/5.gif" style="width: 30px;height: 25px;margin-top: 10px;">
            <p >收藏</p>
        </li>
        <li>
            <a  class="div1">
                <p >加入购物车</p>
                <p >仅支持1倍购买</p>
            </a>
        </li>
    </ul>
</div>


</body>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
   (function() {
        size();
        window.onresize = function() {
            size();
        }

        function size() {
            var winW = document.documentElement.clientWidth || document.body.clientWidth;
            document.documentElement.style.fontSize = (winW / 320) * 100 + "px";
        }
    })()

    var box=document.getElementById('box');
    var h1s=box.getElementsByTagName('h1');
    var lis=box.getElementsByTagName('li');

    //第一个for循环的运行结果:给每一个标题绑定点击事件
    for(var i=0;i<h1s.length;i++){
        h1s[i].onclick=function(){
            for(var i=0;i<h1s.length;i++){
                if(h1s[i]==this){
                    h1s[i].className='color';
                    lis[i].className='show';
                    for(var j=0;j<h1s.length;j++){
                    	h1s[j].style.borderTop='0.01rem solid #fff';
//                      h1s[j].style.borderTop='0.01rem solid deepskyblue';
                    }
	              	h1s[i].style.borderTop=0+'px';
                }else{
                    h1s[i].className=' ';
                    lis[i].className=' ';
                }
            }
        }

    }

 
    

 //获取商品详情
var pro_id=sessionStorage.getItem('pro_id');
console.log(pro_id)
var username=sessionStorage.getItem('username');
var img_url="http://47.92.37.168/supermarket/img/";
var start=0;
var flag_update=true;
$.ajax({
	type:"get"
	,url:"http://47.92.37.168/supermarket/data/get_commodity_info.php"
	,async:true
	,data:{
		id:pro_id
	}
	,dataType:"json"
	// ,jsonp:"callback"
    ,success:function(data){
        console.log(data);
        html='<img src="'+img_url+data.img+'" class="dataimg"><p>【天猫超市】'+data.name+'</p><p>￥'+data.price+'元 <span class="data_privilege">卖家优惠</span></p><p>满199元包邮(20kg内)  月销量'+data.count+'件   <span>北京</span></p>'
      
        
        $('.show').append(html);
     
        if (data.privilege=='yes') {
            $('.data_privilege').css('opacity','1');
        } else{
            $('.data_privilege').css('opacity','0');
        }
   
    }
	,complete:function(){
		//获取好评、中评、差评数量
		$.ajax({
			type:"get"
			,url:"http://47.92.37.168/supermarket/data/get_commodity_evluate.php"
			,async:true
			,data:{
				commodity_id:pro_id
			}
			,dataType:"jsonp"
			,jsonp:"callback"
			,complete:function(){
				//获取用户名和评价信息
				getData(pro_id,start);
			}
			,success:function(data){
				console.log(data);
				var good=0;
				var center=0;
				var bad=0;
				$('.pj').text("评价（"+data.length+"）");//获取评价总数
				$(data).each(function(){
					if (this.evaluate=='1') {
						good++;
					}else if(this.evaluate=='2'){
						center++;
					}else if(this.evaluate=='3'){
						bad++;
					}
				})
				$('.good_evaluate span').text(good);
				$('.center_evaluate span').text(center);
				$('.bad_evaluate span').text(bad);
			}
		});
	}
});

//加入购物车
$('.div1').click(function(){
	
	if (username) {
		$.ajax({
			type:"get"
			,url:"http://47.92.37.168/supermarket/data/my_commodity_car.php"
			,async:true
			,data:{
				'user_phone':username,
				'commodity_id':pro_id,
				'count':1
			}
			,dataType:"jsonp"
			,jsonp:"callback"
			,success:function(data){
				console.log(data);
				
				if (data.msg=='success') {
					console.log(data.msg)
					///location.href="shopping.html";
					//图片移动效果

					
					$('body').append("<img  src='"+$('.dataimg').attr('src')+"' class='addImg' />");
					console.log($('.dataimg').attr('src'))
					var ll= $('.addImg').width()/2;
					var hh=$('.addImg').height()/2;
					
					var start_l=$('.div1').offset().left+$('.div1').width()/2 -ll;
					var start_t=($('.div1').offset().top+$('.div1').height()/2-hh);
					
					console.log(start_l);
					console.log(start_t);
					
					var end_l=$('.cart').offset().left+$('.cart').width()/2-ll;
					var end_t=($('.cart').offset().top+$('.cart').height()/2-hh);
					console.log(end_l);
					console.log(end_t);
					
					$('.addImg').css({'left':start_l+'px','top':start_t+'px'});
					$('.addImg').animate({'left':end_l+'px','top':end_t+'px'},1000,function(){
						$('.addImg').remove();
					})
				}
			}
		});
	} else{
		//console.log(data.msg)
		location.href="login.html";
	}
})

$('.cart').click(function(){
	if(username){
		location.href='shopping.html'
	}else{
		location.href='login.html'
	}
})
//获取评价信息函数
function getData (pro_id,start) {
	$.ajax({
		type:"get"
		,url:"http://47.92.37.168/supermarket/data/get_commodity_evluate_info.php"
		,async:true
		,data:{
			'commodity_id':pro_id,
			'start':start
		}
		,dataType:"jsonp"
		,jsonp:"callback"
		,success:function(data){
			console.log(data);
			if (data) {
				$(data).each(function(){
					$('#li1').append('<div id="div1"><span>'+this.user_name+'</span><span>15:30</span><p>'+this.evaluate_info+'</p><img src="img/淘宝/商品详情_files/lao.jpg" alt=""></div>')
				})
				if (data.length<4) {
					flag_update=false;
				}
			} else{
				flag_update=false;
			}
		}
	});
}
//向上滑动更新数据
$(document).on('touchend',function(e){
	if ( $(this).scrollTop()==$(this).height()-$(window).height() && flag_update ) {
		start+=4;
		getData(pro_id,start);
	}
})
//好评、中评、差评点击切换
$('.data_evaluate_num>div').click(function(){
	$(this).addClass('bgcolor').siblings().removeClass('bgcolor');
})





</script>
</html>